<template>
  <div class="container">
    <filtrate :fetchData="fetchData"></filtrate>
    <div class="content">
      <h4>客户反馈</h4>
      <div id="myChart" style="width:800px;height:600px"></div>
    </div>
  </div>
</template>
<script>
import filtrate from "../filtrate";

export default {
  data() {
    return {
      myChart: {},
      option: {
        color: ["#0177BF"],
        title: {
          text: ""
        },
        tooltip: {},
        toolbox: {
          show: true,
          right: 20,
          feature: {
            saveAsImage: {
              //保存图片
              show: true
            }
          }
        },
        legend: {
          data: ["分数"]
        },
        xAxis: {
          name: "课程",
          data: [],
          axisLabel: {
            interval: 0
          }
        },
        yAxis: {
          name: "单位：分",
          minInterval: 1
        },

        series: [
          {
            name: "分数",
            type: "bar",
            barMaxWidth: 20,
            data: []
          }
        ],
        label: {
          normal: {
            show: true,
            position: "top"
          }
        },
        textStyle: {
          color: "#333"
        }
      }
    };
  },
  components: {
    filtrate
  },
  methods: {
    fetchData(time, type) {
      if (this.myChart.showLoading) {
        this.myChart.showLoading("default", { color: "#0177BF" });
      }
      let data = {
        time: time ? time : "",
        courseType: type ? type : ""
      };
      axios.post(PATH + "Dashboard/customerFeedback", data).then(res => {
        this.myChart.hideLoading();
        if (!res.data.xaxis.length) {
          _g.toastMsg("normal", "暂无数据");
        }
        let start = 0;
        let rotate = 0;
        if (res.data.xaxis.length > 12) {
          start = 100 - parseInt(12 / res.data.xaxis.length * 100);
          rotate = 40;
        }
        this.myChart.setOption({
          grid: {
            bottom: "15%"
          },
          xAxis: {
            axisLabel: {
              rotate: rotate
            },
            data: res.data.xaxis
          },
          series: [
            {
              data: res.data.yaxis
            }
          ],
          dataZoom: [
            {
              type: "slider",
              start: start,
              end: 100
            }
          ]
        });
      });
    },
    drawChart() {
      this.myChart = this.$echarts.init(document.querySelector("#myChart"));
      this.myChart.setOption(this.option);
    }
  },
  created() {
    let filData = Lockr.get("filData");
    if (filData) {
      this.fetchData(filData.time, filData.courseType);
    } else {
      this.fetchData();
    }
  },
  mounted() {
    this.drawChart();
    this.myChart.showLoading("default", { color: "#0177BF" });
    this.myChart.on("click", params => {
      router.push(
        "/dashboard/customerFeedbackDetail/" +
          params.name +
          "/" +
          params.data.id
      );
    });
  }
};
</script>
<style scoped>
.container {
  box-sizing: border-box;
  width: 100%;
  background: #ffffff;
  min-height: 100%;
  font-size: 14px;
  overflow: hidden;
}
.content > h4 {
  text-align: center;
  border-bottom: 1px solid #f0f2f3;
  line-height: 40px;
}
#myChart {
  margin: 50px auto;
}
</style>
